<template>
    <el-container class="comment-view panel-block">
      <el-header class="sa-header">
        <div class="sa-title sa-flex sa-row-between">
          <div class="label sa-flex">
            <span class="left">商家列表</span>
            <!--          <search-condition-->
            <!--            :conditionLabel="filterParams.conditionLabel"-->
            <!--            @deleteFilter="deleteFilter"-->
            <!--          ></search-condition>-->
          </div>
          <div>
            <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
            <el-button
              class="sa-button-refresh"
              icon="Search"
              @click="openFilter"
            ></el-button>
          </div>
        </div>
      </el-header>
      <el-main class="sa-p-0">
        <div  v-loading="loading">
          <el-table
            height="400px"
            class="sa-table"
            :data="table.data"
          >
            <template #empty>
              <sa-empty />
            </template>
            <el-table-column  align="center" width="80">
              <template #default="scope">
                <el-button v-if="props.modal.params.id!=scope.row.store[0].id" class="is-link" type="primary" @click="choose(scope.row)">选择</el-button>
                <div v-else>已选择</div>
              </template>
            </el-table-column>
            <el-table-column label="ID" prop="id" align="center" width="146" />
            <el-table-column label="LOGO" align="center" width="214">
              <template #default="scope">
                <div>商家账号:{{ scope.row.account }}</div>
              </template>
            </el-table-column>
            <el-table-column label="店铺名称" prop="name" align="center" width="142">
                <template #default="scope">
                    {{ scope.row.store[0].name }}
                </template>
            </el-table-column>
            <el-table-column label="商家行业" align="center" width="142">
                <template #default="scope">
                    {{ scope.row.store[0].industry_name }}
                </template>
            </el-table-column>
            <el-table-column label="入驻时间" prop="create_time" align="center" width="178" />
           
            <el-table-column fixed="right" label="启用状态" align="center" width="119">
              <template #default="scope">
                <div class="text-center" v-if="scope.row.status === 'normal'">正常</div>
                <div class="text-center color-red" v-if="scope.row.status === 'close'">停业</div>
                <div class="text-center color-red" v-if="scope.row.status === 'disabled'">关闭</div>
              </template>
            </el-table-column>
          
            
          </el-table>
        </div>
      </el-main>
      <sa-view-bar>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-container>
  </template>
  <script setup>
    import { onMounted, reactive, ref } from 'vue';
    import { api } from '../task.service';
    import {  useSearch, usePagination } from '@/sheep/hooks';
    import { composeFilter } from '@/sheep/utils';
    const emit = defineEmits(['modalCallBack']);
    const props = defineProps({
        modal: {
        type: Object,
        },
    });
  
    const { pageData } = usePagination();
    const loading = ref(false);
  
    const table = reactive({
      data: [],
    });
  
    const filterParams = reactive({
      tools: {
        user: {
          type: 'tinputprepend',
          placeholder: '请输入查询内容',
          field: 'user',
          user: {
            field: 'store.name',
            value: '',
          },
          options: [
            {
              label: '用户昵称',
              value: 'store.name',
            },
            {
              label: '店铺地址',
              value: 'address',
            },
            {
              label: '用户ID',
              value: 'store.id',
            }
          ],
        },
        mobile: {
          type: 'tinput',
          label: '联系电话',
          field: 'mobile',
          value: '',
          options: {
            data: [
              {
                label: '本地生活商家',
                value: 1,
              },
              {
                label: '电商品牌商家',
                value: 2,
              },
  
            ],
          },
        },
        status: {
          type: 'tselect',
          label: '启用状态',
          field: 'status',
          value: '',
          options: {
            data: [
              {
                label: '正常',
                value: 'normal',
              },
              {
                label: '停业',
                value: 'close',
              },
              {
                label: '关闭',
                value: 'disabled',
              },
            ],
          },
        },
      },
      data: {
        status: '',
        mobile: '',
        user: { field: 'store.name', value: '' },
      },
      conditionLabel: {},
    });
  
    const { openFilter, deleteFilter } = useSearch({ filterParams, getData });
  
    onMounted(() => {
      getData();
    });
  
    
  

    // 选择
    function choose(row){
        emit('modalCallBack', { event: 'confirm',row });
    }
    
  
    
  
   
  
    // 获取列表数据
   async function getData (page) {
      loading.value = true;
      if (page) pageData.page = page;
     let tempSearch = _.cloneDeep(filterParams.data);
     let search = composeFilter(tempSearch, {
       'store.name': 'like',
       'store.id': 'like',
       'address': 'like',
       mobile: 'like',
     });
     console.log(search)
      const { error, data } = await api.business.list({
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search
      });
      loading.value = false;
      if (error === 0) {
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
        table.data = data.data;
      }
    };
  
   
  </script>
  <style lang="scss" scoped>
    
  
    .color-red {
      color: #F56C6C;
    }
  
  </style>
  